<style>
	
</style>
<template>
<div>
    <header class="admin-container-header clearfix">
        <div class="header-group">
            <h4 class="title">功能</h4> <h5 class="sub-title">模块管理</h5>
        </div>
    </header>
    <main class="admin-container-body" style="height: calc(100% - 50px)">
        <section class="panel-box">
            <section class="panel-box-body">
                <!--内容列表-->
                <section class="diy-table-list" v-cloak>
                    <div class="diy-table-item diy-table-item-header">
                        <ul class="list-unstyled row">
                            <li class="col-md-2"><span>名称</span></li>
                            <li class="col-md-1"><span>标识</span></li>
                            <li class="col-md-3"><span>描述</span></li>
                            <li class="col-md-1"><span>版本</span></li>
                            <li class="col-md-2"><span>操作</span></li>
                        </ul>
                    </div>
                    <div v-if='itemList.length' class="diy-table-body">
                        <div class="diy-table-item" v-for='(item,index) in itemList'>
                        	<ul class="list-unstyled row">
                        	     <li class="col-md-2 over-h-e"><span>{{item.title}}</span></li>
                        	     <li class="col-md-1"><span>{{item.name}}</span></li>
                        	     <li class="col-md-3 over-h-e"><poptip style='width: 100px;' trigger="hover" transfer :content="item.description"><span>{{item.description}}</span></poptip></li>
                        	     <li class="col-md-1"><span>{{item.version}}</span></li>
                        	     
                        	     <li class="col-md-2" v-if='item.istall == 1'>
                        	         <i-button  type="text" size="small" @click='uninstall(item)'>卸载</i-button>
                        	     </li>
                        	     <li class="col-md-2" v-else>
                        	         <i-button type="text" size="small" @click='install(item)'>安装</i-button>
                        	     </li>
                        	 </ul>
                        </div>
                    </div>
                    <div class="no-block" v-else>
                        <Icon type="ios-filing-outline"></Icon>
                        <p>暂无数据</p>
                    </div>
                </section>
                <!--内容列表结束-->
            </section>
        </section>
    </main>
</div>
</template>

<script>
export default {
	data () {
		return {
            itemList: [],
		}
	},
	watch: {
	},
	mounted() {
        this.getItemList();
    },
    methods: {
        install(item) {
            this.$Modal.confirm({
                title: '消息提示',
                content: '<p>系统将会对数据库执行相关操作，请提前做好数据库备份工作，以免造成数据丢失的后果！如果确认该操作，表示接受并自行承担相关风险事宜（建议此操作由具备开发能力的技术人员来操作）。</p>',
                onOk: () => {
                    this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetMod/install', {
                        name: item.name,
                    }).then(res => {
                        if(res.code == 1) {
                            this.$Message.success('操作成功');
                            this.getItemList();
                        }
                    });
                },
                onCancel: () => {
                }
            });
        },
        uninstall(item) {
            this.$Modal.confirm({
                title: '消息提示',
                content: '<p>系统将会对数据库执行相关操作，请提前做好数据库备份工作，以免造成数据丢失的后果！如果确认该操作，表示接受并自行承担相关风险事宜（建议此操作由具备开发能力的技术人员来操作）。</p>',
                onOk: () => {
                    this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetMod/uninstall', {
                        id: item.id,
                    }).then(res =>{
                        if(res.code == 1) {
                            this.$Message.success('卸载成功');
                            this.getItemList();
                        }
                    });
                },
                onCancel: () => {
                }
            });
        },
        getItemList() {
            this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetMod/itemList', {
            }).then(res => {
                this.itemList = [];
                if(res.code == 1) {
                    var itemList = res.data.itemList;
                   	this.itemList = itemList;
                }
            });
        },
        
    }
}
</script>
